<template>
  <div class="item">
    <Vechart class="option" :options="coplineData"></Vechart>
  </div>
</template>
<script>
import Vechart from "../../components/charts/Vcharts";
import copline from "./echartsjson/copline.json";
export default {
  props: ["datas", "type", "times", "title"],
  components: {
    Vechart,
  },
  data() {
    return {
      dateArea: [],
      copline: copline,
    };
  },
  mounted() {
    setTimeout(() => {
      this.$bus.$emit("loading", true);
    }, 1500);
  },
  methods: {
    async confirmQuery() {
      this.showCharts = false;

      if (this.dateArea) {
        let dataObj = {};
        dataObj.startTime = this.dateArea[0] + " 00:00:00";
        dataObj.endTime = this.dateArea[1] + " 23:59:59";
        this.initList(dataObj);
      } else {
        this.$message({
          message: "请选择时间段！",
          type: "warning",
        });
      }
    },
    initList() {},
  },
  computed: {
    coplineData() {
      // return this.copline;
      let times = this.times;
      var corssName = "COP";
      if (times.length > 0) {
        if (this.type === "line") {
          corssName = "COP";
        } else {
          corssName = "用电量";
        }
        return {
          ...this.copline,
          xAxis: [
            {
              ...this.copline.xAxis[0],
              data: this.times,
              axisLabel: {
                ...this.copline.xAxis[0].axisLabel,
                formatter: function (params, index) {
                  return params.slice(5, 10);
                },
              },
            },
          ],
          yAxis: [{ ...this.copline.yAxis[0], name: this.title }],
          series: [
            {
              ...this.copline.series[0],
              name: corssName,
              data: this.datas,
              type: this.type,
            },
          ],
        };
      } else {
        return this.copline;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.item {
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  // background: chartreuse;
}
</style>
